@import "variables.scss";

.meritorious-til {
    width: 44.94%;
    position: absolute;
    left: 11.5%;
    bottom: 35%;
    z-index: 12;
    animation-duration: 2s;
    transition: all .275s $bezier-mazel;
    img {
        width: 100%;
    }

    &.hover {
        bottom: 38%;
    }
}

.meritorious-box {
    .detail-btn {
        width: 44.94%;
        height: 200px;
        background: transparent;
        position: absolute;
        left: 11.5%;
        bottom: 35%;
        z-index: 12;
        z-index: 25;
        cursor: pointer;
        overflow: hidden;
        text-indent: -999px;
    }
}

.hill {
    height: 100%;
    background: url(../images/hill.png) no-repeat;
    background-position: 0 100%;
    background-size: auto 60%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    animation: hillAni 25s linear infinite;
}

.alumni-slogo {
    width: 1100px;
    margin-left: -550px;
    position: fixed;
    bottom: 10px;
    left: 50%;
    z-index: 201;

    a {
        display: block;
        position: relative;

        &:before,
        &:after {
            content: '';
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -100px;
            top: -100%;
            background: -webkit-radial-gradient(#fff, rgba(253, 223, 171, 0.5), rgba(255, 255, 255, 0.1));
            filter: blur(10px);
            opacity: 0;
            transform: scale(0);
        }

        &:hover {

            &:before,
            &:after {
                animation: fadeZoom 2.5s linear infinite;
            }

            &:after {
                animation-delay: 1.5s;
            }
        }
    }


}

.cloud {
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 200;
    transform: translate(0, -30%);

    img {
        animation: rightAni 20s linear infinite;
    }
}

.fixedbg-swiper{
    width: 32%;position: fixed;top: 0;left: 0;bottom: 0;
    background: #000;
    z-index: $base-z;
    .swiper-slide{
        width: 100%;
    }
}
.meritorious-bg1{
    background: url(../images/meritorious-bg1.jpg) no-repeat;
    background-size: 100% 100%;
}
.meritorious-bg2{
    background: url(../images/meritorious-bg2.jpg) no-repeat;
    background-size: 100% 100%;
}
.meritorious-bg3{
    background: url(../images/meritorious-bg3.jpg) no-repeat;
    background-size: 100% 100%;
}
.meritorious-wrap{
    width: 68%;background: #f6e5c7;margin-left: 32%;position: relative;z-index: $base-z+10;
}



@keyframes hillAni {
    0% {
        background-position: 0 100%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 100%;
    }

    75% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 0 100%;
    }
}

@keyframes rightAni {
    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(15%, 5%, 0);
    }

    50% {
        transform: translate3d(50%, 2%, 0);
    }

    70% {
        transform: translate3d(25%, -3%, 0);
    }

    90% {
        transform: translate3d(-15%, 3%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}
